<script lang="ts" setup>
import {
  ElTable,
  ElInput,
  ElDatePicker,
  ElButton,
  ElPagination,
} from "element-plus";
import { ref, onMounted } from "vue";
import { getOperateLogList } from "#/api/sys/log";
import dayjs from "dayjs";
import { dateShortcuts } from "#/utils/dateShortcuts";
import { useDebounceFn } from "@vueuse/core";

const time = ref([new Date() - 3600 * 1000 * 24 * 7, new Date()]);
const userName = ref("");
const spaceInput = (value: string) => {
  // 过滤空格
  userName.value = value.replace(/\s+/g, '');
};

const search = async () => {
  // 添加对time为null的检查
  const params = {
    userName: userName.value,
    startTime: time.value && time.value[0] 
      ? dayjs(time.value[0]).format("YYYY-MM-DD HH:mm:ss") 
      : "",
    endTime: time.value && time.value[1] 
      ? dayjs(time.value[1]).format("YYYY-MM-DD HH:mm:ss") 
      : "",
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  const { data } = await getOperateLogList(params);
  if (data.records.length > 0) {
    tableData.value = data.records;
    total.value = data.total;
  } else {
    tableData.value = [];
    total.value = 0;
  }
};
const debouncedSearch = useDebounceFn(search, 500);
const resetForm = () => {
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  time.value = [
    dayjs(start).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
  ];
  userName.value = "";
  currentPage.value = 1;
  search();
};
const tableData = ref([]);
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const handleSizeChange = (val) => {
  pageSize.value = val;
  search();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
};

onMounted(() => {
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  time.value = [
    dayjs(start).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
  ];
  search();
});
</script>

<template>
  <div class="page">
    <div class="search flex">
      <div>
        <span>账号：</span>
        <ElInput
          v-model="userName"
          style="width: 240px; margin-right: 20px"
          placeholder="请输入账号"
          @input="spaceInput"
        />
      </div>
      <div>
        <span>选择日期：</span>
        <ElDatePicker
          v-model="time"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin: 0 10px"
          :shortcuts="dateShortcuts"
          @change="search()"
        />
      </div>
      <div style="float: right">
        <ElButton type="primary" @click="debouncedSearch">查询</ElButton>
        <ElButton @click="resetForm">重置</ElButton>
      </div>
    </div>
    <div class="tablePage">
      <ElTable :data="tableData" stripe style="width: 100%" row-key="id">
        <ElTable.TableColumn
          prop="operateModule"
          label="操作模块"
          align="center"
        />
        <ElTable.TableColumn prop="operateName" label="操作名" align="center" />
        <ElTable.TableColumn
          prop="operateType"
          label="操作类型"
          align="center"
        />
        <ElTable.TableColumn prop="userName" label="操作账号" align="center" />
        <ElTable.TableColumn prop="explorer" label="浏览器" align="center" />
        <ElTable.TableColumn prop="ipAddress" label="IP地址" align="center" />
        <ElTable.TableColumn
          prop="operateResult"
          label="操作结果"
          align="center"
        />
        <!-- <ElTable.TableColumn prop="times" label="耗时" align="center" /> -->
        <ElTable.TableColumn
          prop="operateTime"
          label="操作时间"
          align="center"
        />
      </ElTable>
    </div>
    <div class="pagination">
      <ElPagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 80, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style scoped>
.page {
  margin-bottom: 0 !important;
}

.tablePage {
  height: calc(100vh - 244px);
  overflow: scroll;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
}

.el-table {
  margin-top: 20px;
}

:deep(.el-table th) {
  background: #f5f7fa !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 0 24px 0 16px;
}
</style>
